<template>
  <view class="content">
    <view style="padding: 32rpx;">
      <view class="topbox">更换手机号</view>
      <view class="Form">
        <u-form :model="form" ref="uForm" label-width="120">
          <u-form-item label="手机号" prop="phone">
            <u-input v-model="form.phone" placeholder="请输入手机号" type="number" maxlength="11"/>
          </u-form-item>
          <u-form-item label="验证码" prop="authCode" style="margin-top: 30rpx;">
            <u-input v-model="form.authCode" placeholder="请输入验证码" type="number" maxlength="6" />
            <text slot="right" :style="codeStatus ? 'color: #2AC630;' : 'color: #999999;'" class="codeText"
              @tap="getCode">{{ codeTips }}</text>
          </u-form-item>
        </u-form>
      </view>
      <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
      <!-- <view class="iphonebox">
        <view ><text>原手机号码</text></view>
        <view style="margin-top:16rpx;" ><u-input border="true" disabled="false" placeholder="14452556525"></u-input></view>
      </view>-->
      <view></view>
    </view>
    <view @tap="submit" class="bottombox">
      <text>修改电话号</text>
    </view>
  </view>
</template>
<script>
import { Sms, updateMobilePhone } from '@/api/main'
export default {
  data() {
    return {
      usertoken: '',
      form: {
        phone: null,
        authCode: null,
      },
      rules: {
        phone: [{
          type: 'number',
          required: true,
          message: '请输入手机号',
          trigger: ['change', 'blur'],
        }, {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // this.$u.test.mobile()就是返回true或者false的
            return this.$u.test.mobile(value);
          },
          maxlength: 11,
          message: '手机号码不正确',
          // 触发器可以同时用blur和change
          trigger: ['change', 'blur'],
        }],
        authCode: [{
          type: 'number',
          required: true,
          message: '请填写验证码',
          trigger: ['change', 'blur']
        }, {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // uni.$u.test.mobile()就是返回true或者false的
            return this.$u.test.code(value, 6);
          },
          length: 6,
          message: '请填写6位验证码',
          // 触发器可以同时用blur和change
          trigger: ['change', 'blur'],
        }]
      },
      codeTips: '',
      codeStatus: true,
    }
  },
  onReady() {
    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad() {
    this.usertoken = uni.getStorageSync('token')
  },
  methods: {
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: '正在获取验证码',
          mask: true
        })
        let obj = {
          phone: this.form.phone,
          showLoading: true
        }
        Sms(obj).then(res => {
          console.log('看看验证码', res)
          uni.hideLoading();
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
          this.$u.toast(res.message);
          this.codeStatus = false;
        })
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let obj = {
            phone: this.form.phone,
            code: this.form.authCode,
            cachToken: this.usertoken
          }
          updateMobilePhone(obj).then(res => {
            console.log('更改成功', res)
            if (res.code == 200) {
              console.log('adawdwdawd', res.data.token)
              uni.setStorageSync('token', res.data.token)
              this.$u.toast('更改成功')
              uni.navigateBack({
                delta: 1
              })
            } else {
              this.$u.toast(res.data.message)
            }
          })
          console.log('验证通过');
        } else {
          console.log('验证失败');
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  min-height: 100vh;
  background-color: #f5f5f5;

  .topbox {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }

  .iphonebox {
    margin-top: 32rpx;
    padding: 32rpx;
    background-color: white;
  }

  .Form {
    background-color: white;
    padding: 24rpx;
    margin-top: 50rpx;
    border-radius: 8rpx;

    .u-form-item {
      border: 1rpx solid #ccc;
      margin-bottom: 24rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      padding: 0 24rpx;
    }
  }

  .bottombox {
    position: fixed;
    width: 80%;
    left: 10%;

    background-color: red;
    text-align: center;
    line-height: 96rpx;
    color: white;
    height: 96rpx;
    bottom: 66rpx;
    border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
  }
}
</style>